<!-- 奇正相生 -->
<template>
  <div class="content" v-if="isChoosed === 0">
    <h4>请选择:</h4>
    <div class="personOne">
      <p>
        <van-button @click="isChoosed = 1">正兵</van-button>
        <span>若对方没有出闪，你获得其一张牌。</span>
      </p>
      <p>
        <van-button @click="isChoosed = 2">奇兵</van-button
        ><span>若对方没有出杀，你对其造成1点伤害</span>
      </p>
    </div>
  </div>
  <div class="content_finish" v-else>
    <h3>选择完毕</h3>
    <van-button @click="showRes">查看选择结果</van-button>
    <van-button @click="isChoosed = 0">再次选择</van-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showDialog } from "vant";

const isChoosed = ref<number>(0);
const showRes = () => {
  showDialog({
    title: `${isChoosed.value === 1 ? "正兵" : "奇兵"}`,
    message: `${
      isChoosed.value === 1
        ? "若对方没有出闪，你获得其一张牌。"
        : "若对方没有出杀，你对其造成1点伤害"
    }`,
  }).then(() => {
    // on close
  });
};
</script>

<style scoped lang="scss">
.content {
  padding: 20rem;
  .van-button {
    background-color: #bf9d5e;
    color: #fff;
    height: 70rem;
    line-height: 70rem;
    padding: 0 24rem;
    border: none;
  }
  p {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    span {
      margin-top: 8rem;
    }
  }
}
.content_finish {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .van-button {
    width: 100%;
  }
}
</style>
